﻿/// <reference path="../../Scripts/jasmine/jasmine.js" />
/// <reference path="../../Common/Scripts/jquery.js" />
/// <reference path="../../Common/Scripts/jquery.ui.mapAreaGenerator.js" />

(function ($) {
    function getContainer() {
        return $('<div><img src="fake.png" /></div>');
    }

    describe('methods', function () {
        it('with areaBorder and areaHeight and areaWidth', function () {
            var container = getContainer();
            container.find('img').height(23).width(43).mapAreaGenerator({
                areaBorder: 1,
                areaHeight: 10,
                areaWidth: 20
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(4, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); }))
                .toEqual(['1,1,21,11', '1,13,21,23', '23,1,43,11', '23,13,43,23']);
        });
        it('with areaHeight', function () {
            var container = getContainer();
            container.find('img').height(20).width(40).mapAreaGenerator({
                areaHeight: 10
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(2, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); }))
                .toEqual(['0,0,40,10', '0,10,40,20']);
        });
        it('with areaHeight and areaWidth', function () {
            var container = getContainer();
            container.find('img').height(20).width(40).mapAreaGenerator({
                areaHeight: 10,
                areaWidth: 20
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(4, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); }))
                .toEqual(['0,0,20,10', '0,10,20,20', '20,0,40,10', '20,10,40,20']);
        });
        it('with areas', function () {
            var container = getContainer();
            container.find('img').mapAreaGenerator({
                areas: [
                    { coords: '0,0,0', shape: 'circle' },
                    { coords: '0,0,1', shape: 'poly' },
                    { coords: '0,0,2' }
                ]
            });

            expect(container.find('map').length).toEqual(1, 'map');
            expect(container.find('img').attr('usemap')).toBeDefined('usemap');
            expect(container.find('img').attr('usemap')).toEqual('#' + container.find('map').attr('name'), 'usemap');
            var areas = container.find('area');
            expect(areas.length).toEqual(3, 'areas.length');
            expect($(areas[0]).attr('coords')).toEqual('0,0,0', 'areas[0].coords');
            expect($(areas[0]).attr('href')).toEqual('javascript:', 'areas[0].href');
            expect($(areas[0]).attr('shape')).toEqual('circle', 'areas[0].shape');
            expect($(areas[1]).attr('coords')).toEqual('0,0,1', 'areas[1].coords');
            expect($(areas[1]).attr('href')).toEqual('javascript:', 'areas[1].href');
            expect($(areas[1]).attr('shape')).toEqual('poly', 'areas[1].shape');
            expect($(areas[2]).attr('coords')).toEqual('0,0,2', 'areas[2].coords');
            expect($(areas[2]).attr('href')).toEqual('javascript:', 'areas[2].href');
            expect($(areas[2]).attr('shape')).toEqual('rect', 'areas[2].shape');
        });
        it('with areas and areaHeight and areaWidth', function () {
            var container = getContainer();
            container.find('img').height(10).width(30).mapAreaGenerator({
                areaHeight: 10,
                areas: [{ coords: '0,0,10,10' }],
                areaWidth: 10
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(1, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); })).toEqual(['0,0,10,10']);
        });
        it('with areas and ranges and areaHeight and areaWidth', function () {
            var container = getContainer();
            container.find('img').height(10).width(30).mapAreaGenerator({
                areaHeight: 10,
                areas: [{ coords: '0,0,10,10' }],
                areaWidth: 10,
                ranges: [{ coords: '10,0,30,10' }],
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(3, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); }))
                .toEqual(['0,0,10,10', '10,0,20,10', '20,0,30,10']);
        });
        it('with areaWidth', function () {
            var container = getContainer();
            container.find('img').height(20).width(40).mapAreaGenerator({
                areaWidth: 20
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(2, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); }))
                .toEqual(['0,0,20,20', '20,0,40,20']);
        });
        it('with ranges and areaHeight and areaWidth', function () {
            var container = getContainer();
            container.find('img').height(40).width(40).mapAreaGenerator({
                areaHeight: 10,
                areaWidth: 10,
                ranges: [
                    { coords: '10,10,30,20' },
                    { coords: '10,30,30,40' }
                ],
            });

            var areas = container.find('area');
            expect(areas.length).toEqual(4, 'areas.length');
            expect($.map(areas, function (i) { return $(i).attr('coords'); }))
                .toEqual(['10,10,20,20', '20,10,30,20', '10,30,20,40', '20,30,30,40']);
        });
        it('widget', function () {
            var actual = getContainer().find('img').mapAreaGenerator();

            var expected = actual.mapAreaGenerator('widget');

            expect(expected.length).toEqual(1);
            expect(expected[0]).toBe(actual[0]);
        });
    });
})(jQuery);